<template>
  <div class="manager-container">
    <!-- 搜索条件开始-->
    <div class="search">
      <el-row :gutter="20">
        <!-- 搜索条件开始 -->

        <el-col :span="18">
          <el-form :model="queryParams" ref="queryForm" :inline="true" class="manager-search">
            <!-- 替换内容块开始 -->
            <el-col :span="10">
              <el-form-item label="标签" prop="label">
                <el-input
                  v-model="queryParams.label"
                  placeholder="请输入标签"
                  @keyup.enter="handleQuery"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="服务名称" prop="serviceName">
                <el-input
                  v-model="queryParams.serviceName"
                  placeholder="请输入服务名称"
                  @keyup.enter="handleQuery"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="10" v-show="false">
              <el-form-item label="父节点" prop="pid">
                <el-input v-model="queryParams.pid" clearable/>
              </el-form-item>
            </el-col>
            <!-- 替换内容块结束 -->

            <el-col :span="1.5">
              <el-button type="primary" @click="handleQuery" size="default">
                <i class="iconfont icon-chaxun btn-icon">查询</i>
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="resetQuery" size="default">
                <i class="iconfont icon-chongzhi btn-icon">重置</i>
              </el-button>
            </el-col>
          </el-form>
        </el-col>
        <!-- 搜索条件结束 -->

        <!-- 工具条开始 -->
        <el-col :span="6">
          <el-row :gutter="20" style="float: right">
            <el-col :span="1.5">
              <!-- 替换内容块开始 -->
              <el-button type="primary" @click="handleAdd" size="default" >
                <i class="iconfont icon-tianjia btn-icon">添加服务</i>
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button  :disabled="multiple" @click="handleDelete" size="default" plain>
                <i class="iconfont icon-shanchu btn-icon">删除</i>
              </el-button>
            </el-col>
            <!-- 替换内容块结束 -->
          </el-row>
        </el-col>
        <!-- 工具条结束 -->
      </el-row>
    </div>
    <!-- 搜索条件结束-->

    <!-- 主页面开始 -->
    <div class="table-list">
      <el-row :gutter="20" class="main-row">
        <!-- Tree控件开始 -->
        <el-col :span="3">
          <Tree @handle-node-click="handleNodeClick" title="资源目录" :treeList="treeList"/>
        </el-col>
        <!-- Tree控件结束 -->

        <!-- 表格开始 -->
        <el-col :span="15">
          <el-table :data="tableList" v-loading="loading" height="550">
            <el-table-column type="expand">
              <template #default="props">
                <p>标签: {{ props.row.label }}</p>
                <p>id: {{ props.row.id }}</p>
                <p>服务名称: {{ props.row.serviceName }}</p>
                <p>context: {{ props.row.context }}</p>
              </template>
            </el-table-column>
            <el-table-column label="ID" prop="id"/>
            <el-table-column label="标签" prop="label"/>
            <el-table-column label="服务名称" prop="serviceName"/>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="300"
            >
              <template #default="scope">
                <el-button  size="default" type="primary" @click="handleUpdate(scope.row)">
                  <i class="iconfont icon-bianji btn-icon">编辑</i>
                </el-button>
                <el-button plain size="default" @click="handledetails(scope.row)">
                  <i class="iconfont icon-xiangqing btn-icon">查看</i>
                </el-button>
                <el-button plain size="default"   @click="handleDelete(scope.row)">
                  <i class="iconfont icon-shanchu btn-icon">删除</i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="pagination"
          />
        </el-col>
        <!-- 表格结束 -->

        <el-col :span="5.5" class="mapImg">
          <div class="map-default-container">
            <img src="@/assets/images/map.png" alt>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 主页面结束 -->
    <!-- 表单组件 -->
    <formModal ref="formModal" @getList="getList" :formObj="formObj" :isType="isType"/>
  </div>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessageBox, ElMessage } from "element-plus";
//把数据格式化tree格式数据
import formatTree from "@/utils/formatTree";

//分页
import Pagination from "@/components/Pagination/index.vue";
//引入tree组件
import Tree from "@/components/Tree/Tree.vue";
//表单组件
import formModal from "./form.vue";
export default {
  components: { Pagination, Tree, formModal },
  /**
   * 定义变量
   */
  data() {
    return {
      treeList: [],
      form: {}, //表单
      formObj: {}, //编辑数据回显
      loading: false, //加载状态
      tableList: [], //表格列表
      total: 0, //总条目数
      queryParams: {
        //查询参数
        pageNum: 1,
        pageSize: 10,
      },
      rules: {}
    };
  },
  /**
   * 初始化函数
   */
  created() {},
  /**
   * 挂载函数
   */
  mounted() {
    //调用表格数据方法
    this.getList();
    //调用tree树数据方法
    this.getTreeList();
  },
  /**
   * 方法
   */
  methods: {
    /**
     * 获取tree列表
     */
    async getTreeList() {
      //调用列表查询接口
      api.assetCatalog
        .treeList()
        .then(res => {
          this.treeList = formatTree(res.data, 0);
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    /**
     * 获取分页参数
     */
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      this.getList();
    },
    /**
     * 点击Tree节点
     * @param {Object} node
     */
    async handleNodeClick(node) {
      //设置PID值
      this.queryParams.pid = node.id;
      //获取列表数据
      this.getList();
    },
    /**
     * 重置表单
     */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
    /**
     * 查询方法
     */
    handleQuery() {
      //设置默认进入第一页
      this.queryParams.pageNum = 1;
      //获取列表数据
      this.getList();
    },
    /**
     * 获取表格列表
     */
    async getList() {
      //设置Loding状态
      this.loading = true;
      //调用列表查询接口
      api.assetCatalog.list(this.queryParams).then(res => {
        //判断返回状态
        if (res.code) {
          //设置列表数据
          this.tableList = res.rows;
          //设置总条目数
          this.total = res.total;
        } else {
          this.$message.error(res.msg);
        }
        //loading结束
        this.loading = false;
      });
    },
    /**
     * 删除数据
     * @param {Object} node
     */
    async handleDelete(node) {
      ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return;
          //调用删除接口
          api.assetCatalog
            .del(node.id)
            .then(res => {
              //重新获取列表
              this.getList();
              //弹出错误提示
              ElMessage({
                type: "success",
                message: "删除成功!"
              });
            })
            .catch(err => {
              ElMessage({
                type: "error",
                message: "删除失败!"
              });
            });
        })
        .catch(err => {
          ElMessage({
            type: "error",
            message: "删除失败!"
          });
        });
    },
    /**
     * 添加
     */
    handleAdd() {
      this.isType = ""; //根据状态判断是否请求详情接口
      this.$refs.formModal.title = "新增";
      this.$refs.formModal.open = true;
    },
    /**
     * 编辑
     */
    handleUpdate(row) {
      this.isType = "edit"; //根据状态判断是否请求详情接口
      this.$refs.formModal.title = "编辑";
      this.$refs.formModal.open = true;
      this.formObj = row;
    },
    /**
     * 详情
     */
    handledetails(row, type) {
      this.isType = "details"; //根据状态判断是否请求详情接口
      this.$refs.formModal.title = "查看";
      this.$refs.formModal.open = true;
      this.formObj = row;
    }
  }
};
</script>

<style lang="less" scoped></style>
